<template>
  <div class="container">
    <Breadcrumb />
    <div class="rulesbox">
      <a-tabs :default-active-key="tableid" @change="taskid">
        <a-tab-pane key="1" title="房间预约设置" @tab-click="taskid('1')">
          <div class="rulesbt">
            <div class="rulesitemone">时段序号</div>
            <div class="rulesitemtwo">时段范围</div>
            <div class="rulesitemthree">操作</div>
          </div>
          <a-form :model="form" :style="{ width: '600px' }">
            <a-form-item
              v-for="(post, index) of form.timedata"
              :field="`posts[${index}].value`"
              :label="`可选时段-${index + 1}`"
              :key="index"
            >
              <a-time-picker
                v-model="form.timedata[index].timers"
                format="HH:mm"
                type="time-range"
                style="width: 190px"
                @change="changetimer($event, index)"
              />
              <a-button
                @click="handleDelete(index)"
                :style="{ marginLeft: '10px' }"
                >删除</a-button
              >
            </a-form-item>
            <!-- {{ form }} -->
          </a-form>
          <div class="addboxd">
            <a-button @click="handleAdd">添加时段</a-button>
          </div>
          <div class="dbbox">
            <!-- <a-button>停用</a-button> -->
            <a-button type="primary" @click="saveA">保存</a-button>
          </div>
        </a-tab-pane>
        <a-tab-pane key="2" title="信用分扣分规则" @tab-click="taskid('2')">
          <div class="rulesbt">
            <div class="rulesitemone">序号</div>
            <div class="rulesitemtwos">扣分分类</div>
            <div class="rulesitemtwos">规则描述</div>
            <div class="rulesitemtwoss">分值</div>
            <div class="rulesitemthree">操作</div>
          </div>
          <a-form :model="forms" :style="{ width: '600px' }">
            <a-form-item
              v-for="(post, index) of forms.creditConfList"
              :field="`posts[${index}].value`"
              :label="`规则序号-${index + 1}`"
              :key="index"
            >
              <div class="ysgxlabox">
                <a-radio-group
                  class="ysgxla"
                  v-model="forms.creditConfList[index].value"
                  :options="plainOptions"
                  :field-names="rolesFieldsds"
              /></div>
              <div class="gzmsl"
                ><a-input
                  class="gzmslitem"
                  size="large"
                  placeholder="请输入规则描述"
                  v-model="forms.creditConfList[index].cause"
              /></div>
              <div class="fg"></div>
              <div class="gzfz">
                <a-input
                  class="gzfzbox"
                  size="large"
                  placeholder="请输入分值"
                  v-model="forms.creditConfList[index].score"
                />
              </div>

              <a-button
                class="sc"
                @click="handleDeletes(index)"
                :style="{ marginLeft: '10px' }"
                >删除</a-button
              >
            </a-form-item>
            <!-- {{ form }} -->
          </a-form>
          <div class="addboxs">
            <a-button @click="handleAdds">添加规则</a-button>
          </div>
          <div class="dbbox">
            <!-- <a-button>停用</a-button> -->
            <a-button type="primary" @click="saverules">保存</a-button>
          </div>
        </a-tab-pane>
        <a-tab-pane key="3" title="预约日期" @tab-click="taskid('3')">
          <!-- <div class="rulesbt">
            <div class="rulesitemone">序号</div>
            <div class="rulesitemtwos">规则描述</div>
            <div class="rulesitemtwoss">分值</div>
            <div class="rulesitemthree">操作</div>
          </div> -->

          <!-- <div class="addboxs">
            <a-button @click="handleAdds">添加规则</a-button>
          </div> -->
          <a-form
            :model="formss"
            :style="{ width: '600px' }"
            :rules="rules"
            ref="addModel"
          >
            <a-form-item field="data" label="选择日期">
              <a-range-picker
                style="width: 360px; margin: 0 24px 24px 0"
                format="YYYY-MM-DD"
                v-model="formss.data"
                @ok="onOk"
              />
            </a-form-item>
            <a-form-item field="disabled" label="开启预约">
              <a-switch v-model="formss.disabled"
            /></a-form-item>
            <!-- {{ form }} -->
          </a-form>
          <div class="dbbox">
            <!-- <a-button>停用</a-button> -->
            <a-button type="primary" @click="savedate">保存</a-button>
          </div>
        </a-tab-pane>
        <a-tab-pane key="4" title="预约用户限制" @tab-click="taskid('4')">
          <a-form
            :model="formss"
            :style="{ width: '600px' }"
            :rules="rules"
            ref="addModel"
          >
            <a-form-item field="disabled" label="访客预约开关">
              <a-switch
                v-model="formsss.disabled"
                @change="changessss"
                :checked-value="false"
                :unchecked-value="true"
            /></a-form-item>
            <!-- {{ form }} -->
          </a-form>
          <div class="dbbox">
            <!-- <a-button>停用</a-button> -->
            <a-button type="primary" @click="savefk">保存</a-button>
          </div>
        </a-tab-pane>
      </a-tabs></div
    >
  </div>
</template>

<script lang="ts" setup>
  import { Message } from '@arco-design/web-vue';
  import {
    saveAppointmentTime,
    appointmentTime,
    saveConf,
    getConf,
    saveAppointmentDisabled,
    appointmentDisabled,
    saveVisitorDisabled,
    getVisitorDisabled,
  } from '@/api/rulesbooking';
  import { reactive, ref } from 'vue';
  //   全局切换table
  const taskid = (i) => {
    tableid.value = i;
    // console.log('切换', i);
    fetchData();
  };
  //   全局table
  const tableid = ref('1');
  //   获取全局
  const fetchData = () => {
    if (tableid.value == '1') {
      appointmentTime().then((res) => {
        if (res.code == '200') {
          // Message.success({
          //   content: res.message,
          // });
          res.data.forEach((item, index) => {
            form.timedata = res.data.map((item) => ({
              startTime: item.startTime,
              endTime: item.endTime,
              timers: [item.startTime, item.endTime],
            }));
          });
        } else {
        }
      });
    }
    if (tableid.value == '2') {
      getConf().then((res) => {
        if (res.code == '200') {
          // Message.success({
          //   content: res.message,
          // });
          res.data.forEach((item, index) => {
            forms.creditConfList = res.data.map((item) => ({
              cause: item.cause,
              score: item.score,
              type: item.type,
              value: item.type,
            }));
          });
        } else {
        }
      });
    }
    if (tableid.value == '3') {
      appointmentDisabled().then((res) => {
        if (res.code == '200') {
          // Message.success({
          //   content: res.message,
          // });
          // console.log('reds', res.data);
          if (res.data.disabled == 1) {
            formss.disabled = true;
          }
          if (res.data.disabled == 9) {
            formss.disabled = false;
          }
          formss.data[0] = res.data.startDate;
          formss.data[1] = res.data.endDate;
        } else {
        }
      });
    }
    if (tableid.value == '4') {
      getVisitorDisabled().then((res) => {
        if (res.code == '200') {
          // Message.success({
          //   content: res.message,
          // });
          // console.log('reds', res.data);
          formsss.value.disabled = res.data;
          // if (res.data.disabled == 1) {
          //   formsss.disabled = true;
          // }
          // if (res.data.disabled == 9) {
          //   formsss.disabled = false;
          // }
        } else {
        }
      });
    }
  };
  fetchData();
  const reset = () => {
    form.timedata = [];
    fetchData();
  };

  const saverules = () => {
    forms.creditConfList.map((item, index) => {
      item.type = item.value;
    });
    // console.log('返回的是个数组', forms.creditConfList);

    saveConf({
      creditConfList: forms.creditConfList,
    }).then((res) => {
      if (res.code == '200') {
        Message.success({
          //   content: res.message,
          content: '保存成功',
        });
        // done(true);
        // reset();
      } else {
        // done(false);
      }
    });
  };
  //   保存
  const saveA = () => {
    saveAppointmentTime({
      appointmentTimeList: form.timedata,
    }).then((res) => {
      if (res.code == '200') {
        Message.success({
          //   content: res.message,
          content: '保存成功',
        });
        // done(true);
        // reset();
      } else {
        // done(false);
      }
    });
  };
  const form = reactive({
    timedata: [{ startTime: '', endTime: '', timers: ['', ''] }],
  });
  const forms = reactive({
    creditConfList: [{ cause: '', score: '' }],
  });
  const formsss = ref({
    disabled: false,
  });
  const formss = reactive({
    disabled: false,
    startDate: '',
    endDate: '',
    data: [],
  });
  const handleAdds = () => {
    forms.creditConfList.push({ cause: '', score: '' });
  };
  const handleAdd = () => {
    form.timedata.push({ startTime: '', endTime: '', timers: [] });
  };
  const handleDeletes = (index) => {
    forms.creditConfList.splice(index, 1);
  };
  const handleDelete = (index) => {
    form.timedata.splice(index, 1);
  };
  const changetimer = (value, index) => {
    console.log('timer', form.timedata[index].timers);
    form.timedata[index].startTime = value[0];
    form.timedata[index].endTime = value[1];
  };
  const rules = reactive({
    data: [
      {
        required: true,
        message: '请选择日期',
      },
    ],
    disabled: [
      {
        required: true,
        message: '请选择开启或者关闭',
      },
    ],
  });
  const plainOptions = [
    { label: '教室验收', value: 'ROOM' },
    { label: '设备验收', value: 'DEVICE' },
  ];
  // const rolesFieldsds = {
  //   value: 'type',
  //   label: 'label',
  // };
  const addModel = ref();
  const savedate = () => {
    addModel.value.validate(
      async (errors: undefined | Record<string, ValidatedError>) => {
        if (!errors) {
          console.log('保存', formss);
          let disablednum = 0;
          if (formss.disabled == true) {
            disablednum = 1;
          }
          if (formss.disabled == false) {
            disablednum = 9;
          }
          saveAppointmentDisabled({
            disabled: disablednum,
            startDate: formss.data[0],
            endDate: formss.data[1],
          }).then((res) => {
            if (res.code == '200') {
              Message.success({
                //   content: res.message,
                content: '保存成功',
              });
              reset();
            } else {
              // done(false);
            }
          });
        } else {
        }
      }
    );
  };

  const savefk = () => {
    addModel.value.validate(
      async (errors: undefined | Record<string, ValidatedError>) => {
        if (!errors) {
          console.log('保存', formsss.value.disabled);

          saveVisitorDisabled({
            disabled: formsss.value.disabled,
          }).then((res) => {
            if (res.code == '200') {
              Message.success({
                //   content: res.message,
                content: '保存成功',
              });
              getVisitorDisabled().then((res) => {
                if (res.code == '200') {
                  // Message.success({
                  //   content: res.message,
                  // });
                  // console.log('reds', res.data);
                  formsss.value.disabled = res.data;
                  // if (res.data.disabled == 1) {
                  //   formsss.disabled = true;
                  // }
                  // if (res.data.disabled == 9) {
                  //   formsss.disabled = false;
                  // }
                } else {
                }
              });
              reset();
            } else {
              // done(false);
            }
          });
        } else {
        }
      }
    );
  };
</script>

<style>
  .rulesbox {
    background-color: #fff;
  }
  .rulesbox .arco-tabs-tab {
    font-size: 17px !important;
  }
  .addboxd {
    margin-left: 160px;
    margin-bottom: 20px;
  }
  .addboxs {
    margin-left: 280px;
    margin-bottom: 20px;
  }
  .rulesbt {
    display: flex;
    padding-left: 40px;
    margin-bottom: 20px;
  }
  .rulesitemone {
    /* background-color: rgb(0, 209, 181); */
    width: 85px;
  }
  .rulesitemtwo {
    width: 190px;
    text-align: center;
  }
  .rulesitemtwos {
    width: 190px;
    text-align: center;
  }
  .rulesitemtwoss {
    width: 190px;
    text-align: center;
    margin-left: 50px;
  }
  .rulesitemthree {
    width: 55px;
    text-align: center;
    margin-left: 13px;
  }
  .dbbox {
    text-align: center;
    margin: 20px 0;
  }
  .fg {
    width: 50px;
    display: block;
    background-color: red;
  }
</style>
